<!--
 * @Descripttion:
 * @version: 1.0
 * @Author: 任静
 * @Date: 2020-10-19 19:45:43
 * @LastEditors: lynn
 * @LastEditTime: 2020-10-22 10:39:24
-->

<template>
  <div>
    <h2>会员管理</h2>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="手机号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.tel }}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 10px">{{ scope.row.regdate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最近活跃时间" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 10px">{{ scope.row.activedate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="兴趣标签" width="180">
        <template slot-scope="scope">
          <el-tag effect="dark">{{ scope.row.tag }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column> -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑会员信息 -->
    <el-dialog title="编辑会员" :visible.sync="editDialogVisible">
      <el-form :label-position="vipform" label-width="80px" :model="vipform">
        <el-form-item label="手机号">
          <el-input v-model="vipform.tel" />
        </el-form-item>
        <el-form-item label="注册时间">
          <el-input v-model="vipform.regdate" />
        </el-form-item>
        <el-form-item label="活跃时间">
          <el-input v-model="vipform.activedate" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="vipform.name" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="vipform.activedate" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="vipform.name" />
        </el-form-item>
        <el-form-item label="标签">
          <el-input v-model="vipform.tag" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handleSave"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页组件 -->
    <el-pagination
      :current-page="currentPage4"
      :page-sizes="[5, 10, 15, 20]"
      :page-size.sync="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total.sync="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      tableData: [], // 表格数据
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      // 编辑表单
      vipform: {
        tel: '',
        regdate: '',
        activedate: '',
        name: '',
        address: '',
        tag: '',
        consume: ''
      },
      // 是否显示编辑表单
      editDialogVisible: false,
      pagenum: 1,
      pagesize: 5,
      total: 0
    }
  },
  created() {
    // 获取会员列表数据
    this.getList()
  },
  methods: {
    // 请求表格数据
    async getList() {
      const res = await axios.get('/vips')
      let data = res.data
      this.total = res.data.length
      data = data.slice((this.pagenum - 1) * this.pagesize, this.pagisize)
      console.log(data)
      this.tableData = data
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pagenum = val
      this.getList()
    },
    // 编辑
    handleEdit(index, row) {
      this.editDialogVisible = true
      // 解构当前点击项的数据
      const { tel, regdate, activedate, name, address, tag, consume } = row
      // 给当前表单的内容设置默认值
      this.vipform.tel = tel
      this.vipform.regdate = regdate
      this.vipform.activedate = activedate
      this.vipform.name = name
      this.vipform.address = address
      this.vipform.tag = tag
      this.vipform.consume = consume
    },
    // 保存修改
    handleSave() {
      this.editDialogVisible = false
      console.log(this.vipform)
    },
    // 删除
    handleDelete(index, row) {
      console.log(index, row)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
